<template>
    <div id="car">
       <mt-header fixed title="购物车">
           
        </mt-header>
        <!-- 购物车列表 -->
        <div class="car-list" ref="carScroll">
           <ul>
                <li class="car-item" v-for="(items, index) in carMenu" :key="index">
                    <div class="title">
                        <div class="title-info">
                            <input type="radio" name="title" :checked="items.selectFlag" @tap.stop="selectCheck(items, index)">
                            <span class="shop-uname">用户名：{{ items.orderUName}}</span>
                            <span class="shop-sname">商店：{{ items.orderSName}}</span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="list-item" v-for="(item, i) in items.dataList" :key="i">
                            <div class="delect">
                                <button @click="delectCar(index, i)">删除</button>
                            </div>
                            <div class="check" >
                                <input type="checkBox" :checked="item.selectFlag" @tap.stop="selectCheckItem(item, index)">
                            </div>
                            <div class="foodName">
                                <span>{{item.foodName}}</span>
                                <span>￥{{ item.foodPrice}}</span>
                            </div>
                            <div class="option">
                                <button :class="{active: item.foodCount === 0}"
                                    :disabled="item.foodCount === 0"
                                    @click.stop="decr(item)">-</button>
                                <button  @click.stop="incr(item)">+</button>
                                <p>{{ item.foodCount}}</p>
                            </div>
                        </div>
                    </div>
                </li>
                
           </ul>
        </div>
        <!-- 购物车为 0显示的信息 空空如也 -->
        <div class="emplty" v-if="carMenu.length <= 0">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwuchekongkongde"></use>
                </svg>
            </div>
            <div style="color: #141414;" class="text">
                空空的呢
            </div>
        </div>
        <!-- 购物车结算 -->
        <div class="car-content">
            <div class="content">
                <div class="car-img">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kongkongruye"></use>
                    </svg>
                </div>
                <div class="car-mon">
                    ￥<span v-if="subCarTotal === 0">{{carTotal}}</span>
                      <span v-else>{{subCarTotal}}</span>
                </div>
                <div class="car-option">
                    <!-- 当结算金额为 0就不能点击 -->
                    <mt-button :disabled="carTotal === 0" type="primary" @click="acount">结算</mt-button>
                    <mt-button :disabled="carTotal === 0" type="danger" @click="showSelectCoupon">优惠卷</mt-button>
                </div>
            </div>
        </div>

         <!-- 订单信息填写 -->
        <div v-if="addOrder" class="order-info">
            <div class="add-info">
                <p class="title">
                    请填写下单人的信息
                </p>
                <div class="foodData">
                    <mt-field  label="姓名"  placeholder="请输入联系人姓名" v-model="orderName"></mt-field>
                    <mt-field  label="地址"  placeholder="请输入联系人地址" v-model="orderAddre"></mt-field>
                    <mt-field  label="电话" placeholder="请输入联系人电话" type="tel" v-model="orderTel"></mt-field>
                    <mt-field  placeholder="信息备注" type="textarea" rows="4" v-model="orderCom"></mt-field>
                </div>
                <!-- 关闭 -->
                <div class="car-add-close">
                     <mt-button type="danger" @click="() =>{addOrder = false}" size="large">取消订单</mt-button>
                     <mt-button type="primary" @click="carHandle" size="large">确认订单</mt-button>
                </div>
            </div>
        </div>

        <!-- 优惠卷界面 -->
        <transition name="rIn">
            <div class="select-coupon" @click.self="isShowCoupon = false" v-if="isShowCoupon">
                <div class="select-list">
                    <!-- 有优惠劵 -->
                    <div v-if="couponMsg.length !=0" class="title">
                        请选择您的优惠卷
                    </div>
                    <!-- 没有优惠劵 -->
                    <div v-else class="title">
                        您没有该商店的优惠劵
                    </div>

                    <div class="list">
                        <!-- 显示优惠劵 -->
                        <div v-if="couponMsg.length !=0">
                            <mt-radio
                                :value="couponMsg[0]"
                                v-model="selectCouponItem"
                                :options="couponMsg">
                            </mt-radio>
                        </div>
                        <!-- 没有优惠劵显示相应的图标 -->
                        <div v-else>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-meiyourenwu"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="select-button">
                        <mt-button @click.native="selectCoupon" type="danger" size="large">确定</mt-button>
                    </div>
                </div>                
            </div>
        </transition>        
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
import {mapState, mapActions, mapMutations} from 'vuex'
import { MessageBox } from 'mint-ui'
import axios from 'axios';
export default {
    data(){
        return {

            addOrder: false,//打开 添加联系人方式页面
            //订单联系人的方式
            orderName:'',
            orderTel:'',
            orderAddre:'',
            orderCom:'',

            isShowCoupon: false,//是否显示优惠卷界面
            couponData: [],//点击当前商店的优惠卷数据
            shopCouponInfo: {},//选择的当前优惠劵信息
            couponMsg: [],//点击当前商店的优惠卷数据msg属性集合
            selectCouponItem: '',//选择的优惠卷是哪一条
            subCarTotal: 0//代替当前的购物车结算金额, 选择优惠卷的计算就是拿它计算
                            //但是此时 点击复选框 单选框 或者 增加减 要同步 carTotal watch
        }
    },
    inject: ['reload', 'goB'],
    created(){
        
        this.$nextTick(() =>{
            this._scrollInit()
        })
    },
    //计算属性
    computed:{
        ...mapState([
            'storeFlag',
            'uname',
            'carMenu',
            'carTotal',
            'orderMenu',
            //优惠卷
            'myCouponMenu',
            'shopOrderId'
        ])
    },
    watch:{
        //同步当前的总价钱
        carTotal(val, oldVal){
            this.subCarTotal = val
        }
    },
    //方法
    methods:{
        ...mapMutations([
            'setState',
            'setToast',
            'setIndicator'
        ]),
        ...mapActions([
            'saveOrder',
            'useCoupon',
            'checkShop'
        ]),

//-----------------------------------------优惠卷
        //优惠卷的显示筛选
        showSelectCoupon(){

            // 没有优惠劵显示 0
            if(this.myCouponMenu.length === 0) return this.isShowCoupon = true
            //先清空之前的
            this.couponMsg = []
            
            //获取当前商店的优惠劵 即 item.belong === this.shopOrderId + 'b'
            this.couponData = this.myCouponMenu.filter((item, index) => item.belong === this.shopOrderId + 'b')
            //验证商店有没有破产
            this.checkShop({
                shopId: this.shopOrderId
            }).then( () =>{
                //商店存在
                console.log('放心购买吧，没有破产')
            },() =>{

                //不存在
                MessageBox({
                    title: '提示',
                    message: '该商家已经宣布破产，无法下单，是否删除购物车与他相关的内容?',
                    showCancelButton: true
                }).then(action =>{
                    
                    if(action === 'cancel') return  this.isShowCoupon = false
                    //关闭面板
                    this.isShowCoupon = false
                    //点击确定 删除数据 优惠劵不删除 用户可根据自己需求删除
                    const i = this.carMenu.findIndex(item =>{
                        //此时购物车存储的每一条数据即为一个商店的信息 orderId即为该商店的id
                        return item.orderId === this.shopOrderId
                    })

                    this.carMenu.splice(i, 1)
                    //把 状态 以及data的 总价钱清空
                    this.setState({carTotal: 0})
                    this.subCarTotal = 0
                })
            })


            //打开优惠劵面板
            this.isShowCoupon = true
            //如果 this.couponData 为0 说明没有优惠劵 此时不需要在往下执行了
            if(this.couponData.length === 0) return

            //这里才筛选 没过期 没使用的优惠劵
            this.couponData.forEach(item =>{
                if(item.couponStatus === 1) return this.couponMsg.push(item.msg)
            })


            //默认选中第一条
            this.selectCouponItem = this.couponMsg[0]
        },

        selectCoupon(){

           /*
                目的： 获取当前的优惠卷 根据优惠卷的优惠方式 对总价钱进行再次计算即可
                    1 获取当前顾客选择的是哪个优惠卷 this.couponData
                    2 在通过this.couponMsg获取当前优惠卷的数据
                    3 获取优惠格式 打折 还是 抵扣 还是满减 对总金额 进行相应的操作
                    4 满减需要满足最低价格  不然弹出提示框
           */

            //(1)(2)(3) 获取优惠卷数据 couponData即为couponData
            this.shopCouponInfo = this.couponData.find((item, index) =>{                
                return item.msg === this.selectCouponItem
            })

          
            //(4)获取当前的折扣方式
            this.couponHandle()

           
        },


        //处理优惠卷总价钱的计算 以及优惠卷的删除
        couponHandle(couponData){
            
            const {couponType, data} = this.shopCouponInfo
            
            //全部商品抵扣
            if(couponType === '抵扣'){
                this.isShowCoupon = false

                ////价钱计算  获取当前的抵扣价钱data里面
                this.subCarTotal = this.carTotal - data.count

            //折扣
            }else if(couponType === '折扣'){
                this.isShowCoupon = false

                ////价钱计算 此时只要获取小数点后一位就好了
                this.subCarTotal = ((this.carTotal*data.count)/10).toFixed(1)
            //满减
            }else if(couponType === '满减'){
                //判断当前是否符合满减
                if(this.carTotal< data.startCount) 
                    return MessageBox.alert('您还差'+Math.abs((this.carTotal - data.startCount))+'元, 才能使用该优惠卷')

                this.isShowCoupon = false
                //价钱计算
                this.subCarTotal = this.carTotal - data.count
                    
            }
        },

        //此时只有结算的时候才能发请求 优惠卷的删除操作  只是发请求 设置状态为 2 已经使用
        couponToUse(){

            const {couponFlag,couponId} = this.shopCouponInfo

            this.useCoupon({
                couponFlag,
                couponId,
                data:{
                    couponStatus: 2
                }
            }).then(() =>{
                console.log('使用优惠劵成功')
            },() =>{
                console.log('使用优惠劵失败')
            })
        },

//---------------------------------------购物车结算逻辑
        //删除某条食材的列表
        delectCar(index, i){
        
            /*
                先判断当前食材有没有选中 选中就把当前的总价钱 - 当前选中的价钱
            */
           
           const item = this.carMenu[index].dataList[i]
           if(item.selectFlag){
               //这里判断一下 如果subCarTotal为 0 则用carTotal算 否则 用subCarTotal算
               if(this.subCarTotal === 0){
                   this.setState({carTotal: this.carTotal - (item.foodCount*item.foodPrice)})
               }else{
                   this.subCarTotal -= item.foodCount*item.foodPrice
                   this.setState({carTotal: this.subCarTotal})
               }
           }

            this.carMenu[index].dataList.splice(i, 1)
            if(this.carMenu[index].dataList.length <= 0){
                this.carMenu.splice(index, 1)
            }
        },
        //数量减一
        decr(dataList){
            dataList.foodCount--
            this.getClickTotal(dataList)
        },

         //数量增一
        incr(dataList){
            dataList.foodCount++
            this.getClickTotal(dataList, true)
        },
        //购物车结算
        acount(){
            //判断一下  此时如果之前又加入购物车 但是没有结算 就前往其他组件 
            //当再次进来的时候 购物车 还是有选择食材的 但是此时 subCarTotal为 0
            const total = this.subCarTotal === 0? this.carTotal: this.subCarTotal
            MessageBox({
                title: '结算',
                message: '当前订单金额为: '+ total +'元。',
                
                showCancelButton: true
            }).then(action =>{
                if(action === 'cancel') return
                //先填写联系人方式
                this.addOrder = true
            })
        },
        //订单信息填写
        checkInfo(){
            const { orderName, orderTel, orderAddre, orderCom} = this

            const regPhone = new RegExp(/^1[3|4|5|8][0-9]\d{4,8}$/)
            if(!orderName){
                return this.setToast('请输入姓名')
            }else if(!orderAddre){
                return this.setToast('请输入地址')
            }else if(!orderTel){
                return this.setToast('请输入电话')
            // }else if(!regPhone.test(orderTel)){
            //     return this.setToast('电话填写错误')
            }else if(!orderCom){
                //备注可以没有
                this.orderCom = '无备注'
            }

            return {
                orderName,
                orderAddre,
                orderTel,
                orderCom
            }
        },
        // 确认订单 处理购物车结算的逻辑  该方法是填写完毕订单联系人之后 点击确认订单之后调用
        carHandle(){

            /*
                只有这里才能同步 storecarTotal 和 subCarTotal
            */

            this.setState({carTotal: this.subCarTotal})
            /*  
                现在任务
                    1 获取选择的菜单
                    2 获取这些菜单 所在的商店名字
            */

            //调用 检查信息方法  只有返回true才能执行
            const personInfo = this.checkInfo()
            if(!personInfo) return


            let orderList = []
            //即为下单商店的 用户名
            let orderUName = ''
            //商店名字
            let orderSName = ''
            //用于获取订单 商家(加入购物车传过来) 和 顾客 用自己的 id
            let orderId = ''

            let foodIndex = this.carMenu.findIndex((item, index) =>{
                
                //说明有标题选中 不需要在往下执行了
                if(item.selectFlag) return item.selectFlag

                //获取某商店的菜单没有被选中的集合
                const noSelect = item.dataList.filter(val =>{
                    if(!val.selectFlag) return val
                })

                //获取某商店的菜单选中的集合
                const select = item.dataList.filter(val =>{
                    if(val.selectFlag) return val
                })
                
                //不等于0即为 在当前商店有选择食材
                if(select.length != 0){
                    //获取选中集合 此时需要获取商店名字
                    orderUName = item.orderUName
                    orderSName = item.orderSName
                    orderId = item.orderId
                    orderList = select.slice(0)
                }

                //满足这个条件即为当前商店的菜单 一个都没有选择 不需要操作
                if(noSelect.length >= item.dataList.length) return

                //否则 该商店 有菜单被选中 赋值即可  此时即为删除了购物车的选中的内容
                item.dataList = noSelect
            })

            if(foodIndex != -1){
                //说明有标题选中  获取商店名字 和选中集合 并删除选中集合
                orderUName = this.carMenu[foodIndex].orderUName
                orderSName = this.carMenu[foodIndex].orderSName
                orderId = this.carMenu[foodIndex].orderId
                orderList = this.carMenu[foodIndex].dataList//此时是不需要克隆的
                this.carMenu.splice(foodIndex, 1)
            }

            //这个作为标识 因为同一时间可能多个人下单 还要加上 下单用户的用户名
            let oFlag = Date.now()

            //显示加载图标
            this.setIndicator('正在下单...')

            let shopOrder = {
                total: this.carTotal,
                time: new Date(oFlag).toLocaleString(),
                personInfo,
                orderList
            }


            //oFlag加上用户名 这样就不会重复了 店主的请求
            //此时 店主的name应该是店主的用户名  后面改一下
            oFlag = oFlag + '-' + this.uname
            this.saveOrder({
                orderUName: this.uname,
                orderSName: '-',
                otherOrderId: this.storeFlag,
                oFlag,
                shopOrder,
                orderId,
                orderGet: orderId + 'boss'
            })
            //下单者的请求
            this.saveOrder({
                orderUName,
                orderSName,
                otherOrderId: orderId,
                oFlag,
                shopOrder,
                orderId: this.storeFlag,
                orderGet: this.storeFlag + 'customer'
            })

            //把价钱清空
            this.setState({carTotal: 0})

            //把添加联系人方式界面关闭
            this.addOrder = false
            this.couponToUse()
        },
        //标题选中与否
        selectCheck(item, foodIndex){
            item.selectFlag = !item.selectFlag

            //此时这里直接点击标题单选框  就直接设置 标识符为该商店名字
            this.setState({shopOrderId: item.orderId})
            //调用计算价钱方法
            this.getClickRadio(item)
            /*
                1 标题 选中
                    下面的小菜单都选中 否则 都不选中
                2 子菜单全部选中 标题选中，否则不选中
            */

           //标题选中
            if(item.selectFlag){
               this.setSelectFlag(item.orderUName)
               //这里单独设置
               this.carMenu[foodIndex].dataList.forEach(val => {
                    val.selectFlag = true  
               })
               return
            }

            //标题不选中
            this.carMenu[foodIndex].dataList.forEach(val => {
                val.selectFlag = false  
            })
           
        },
        //子菜单选中与否
        selectCheckItem(item, foodIndex){
            
            item.selectFlag = !item.selectFlag
            const {orderId, orderUName} = this.carMenu[foodIndex]
            //此时点击的复选框 商店已经改变 carTotal置为 0
            if(!(this.shopOrderId === orderId)) {

                this.setState({shopOrderId: orderId})

                this.setState({carTotal: 0})
            }


            //调用计算价钱方法
            this.getClickCheckBox(item)

            /*
                直接遍历子菜单 判断有没有 selectFlag为false
                    1 有 标题不被选中
                    2 没有 标题选中
            */

           const i = this.carMenu[foodIndex].dataList.findIndex((val, index) =>{
               return val.selectFlag === false
           })

            //为 -1证明没找到selectFlag为false  全为true  则标题选中
           if(i === -1) return this.setSelectFlag(orderUName)

           //证明这里是 点击了不同的商店
           this.setSelectFlag(this.carMenu[foodIndex].orderUName, true)

        },

        //遍历除了自己之外的dataList的selectFlag设置为false
        setSelectFlag(orderUName, flag){
            //此时如果item的orderUName === 传来的 orderUName 即为自己
            this.carMenu.forEach((item, index) =>{
               
               //上面不再需要单独设置 标题的选中与否
               // 但是 子菜单需要 在selectCheck 和selectCheckItem单独设置

                //说明点击了不同的商店 并且不是全部菜单选中 之前的其他商店 清空
                if(flag && item.orderUName === orderUName) return item.selectFlag = false

                //这两个if只能执行其一  不管谁执行  (1)处的代码都会执行
                // 即设置除了当前的商店  其他的商店标题和菜单都设置为不选中状态

                //这里是 商店的全部菜单选中
                if(item.orderUName === orderUName) { 

                   item.selectFlag = true
                   return 
                }

                //(1)否则遍历设置
                item.selectFlag = false
                item.dataList.forEach(val =>{
                    val.selectFlag = false
                })
            })
        },

        //这里计算单独点击 加减 的总价钱
        getClickTotal(dateList, flag){
            //datelist 即为当前点击的 那条 清单 
            //flag 判断加减  true即为加  否则减
            //如果当前的dataList没有被选中  则不需要计算增加减 也不需要计算它的价格、
            if(!dateList.selectFlag) return

            console.log(typeof this.carTotal)

            //否则计算价格
            const carTotal = this.carTotal + (flag?parseFloat(dateList.foodPrice): -parseFloat(dateList.foodPrice))
            this.setState({carTotal: parseFloat(carTotal.toFixed(2))})
        },

        //这里计算单独点击每一项的复选框 的总价钱 一边点击一点计算
        getClickCheckBox(dateList){

            //dateList 也是点击的那一项
            const carTotal = this.carTotal + 
            (dateList.selectFlag? dateList.foodCount*dateList.foodPrice:
            -dateList.foodCount*dateList.foodPrice)
            
            this.setState({carTotal: parseFloat(carTotal.toFixed(2))})

        },

        //这里计算点击 单选框 标题的
        getClickRadio(item){
            //item即为点击的标题 单选框
            //这里计算全选的价格
            if(item.selectFlag){
                //true  此时 该商店的所有菜单选中
                let carTotal = 0 
                item.dataList.forEach(val =>{
                    carTotal += val.foodCount*val.foodPrice
                    this.setState({carTotal: parseFloat(carTotal.toFixed(2))})
                })

                return
            }
            
            //false  此时该商店所有菜单不选中   总价钱置为 0
            this.setState({carTotal: 0})
            
        },

        //数组的深度克隆
        arrClone(arr){
            if(arr.length <=0) return []
            let newArr = []
            
            for(let item of arr){	

                let newObj = {}
                for(let key in item){												
                    
                    if (Object.prototype.toString.call(item[key]) === "[object Array]") {
                        
                        newObj[key] = item[key].slice(0)							
                                                                                                            
                    }else{
                        //如果不是数组 就直接push
                        newObj[key] = item[key]							
                    }						
                }
                
                newArr.push(newObj)	
                
            }

            return newArr

        },

        //初始化better-scroll
        _scrollInit(){
            //开启点击事件
            this.carScroll = new Bscroll(this.$refs.carScroll, { 
                click: true,
                tap: true
            })
        }   
            
    },
    directives:{
        //商品滚动的最大高度
        getH:{
             inserted: function (el, binding) {
               el.style.height = (document.querySelector('html').clientHeight - binding.value) + 'px'
            }
        }
    }
}
</script>

<style lang="less" scoped>
#car{
    height: 100%;
    overflow: hidden;
    // 购物车列表
    .car-list{
        margin-top: 40px;
        ul{
            .car-item{
                
                padding: 5px 0;           
                .title{
                    display: flex;
                    justify-content: space-between;
                    vertical-align:middle;
                    height: 25px;
                    border-bottom: 1px solid #49CB5F;
                    padding: 7px;
                    .title-info{
                        input{
                            height: 25px;
                            width: 25px;
                            vertical-align:middle;
                        }
                        .shop-uname{
                            margin: 0 10px;
                        }
                    }
                }
                .list{
                    .list-item{
                        display: flex;
                        padding: 5px;
                        vertical-align:middle;
                        border-bottom: 1px solid #ccc;
                        
                        .delect{
                            button{
                                width: 50px;
                            }
                        }
                        .check{
                            width: 20px;
                            height: 20px;
                            margin: 0 15px;
                            input{
                                height: 100%;
                                width: 100%;
                                vertical-align:middle;
                            }
                        }
                        .foodName{
                            flex: 1;
                        }
                        .foodPrice{
                            margin: 0 5px;
                        }
                        .option{
                            flex: 1;
                            display: flex;
                            font-size: 16px;
                            > button{
                                width: 35px;
                                margin-right: 5px;
                                font-size: 16px;
                            }

                            .active{
                                color: red;
                            }
                        }
                        .foodImg{
                            vertical-align:middle;
                            width: 50px;
                            > img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
    //结算
    .car-content{
        position: fixed;
        bottom: 55px;
        left: 0px;
        height: 50px;
        width: 100%;
        background: #000;
        //内容区域
        .content{
             display: flex;
             height: 100%;
             line-height: 50px;

            .car-img{
                width: 50px;
                > svg{
                    height: 80%;
                    width: 100%;
                    padding: 10% 2%; 
                }
            }
            .car-mon{
                flex: 1;
                text-align: center;
                font-size: 20px;
                color: red;
            }
            .car-option{
                flex: 1;
                display: flex;
                justify-content: flex-end;
               .mint-button {
                   height: 100%;
                   font-size: 12px;
                   border-radius: 0;
               }
            }
        }
    }

    //订单信息填写
    .order-info{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(125, 125, 125, 0.7);
        z-index: 10;
        .add-info{
            width: 90%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            background: #fff;
            .title{
                text-align: center;
                font-size: 20px;
                color: #49CB5F;
                margin: 10px 0;
            }
            //关闭按钮
            .car-add-close{
               margin-top: 10px;
               display: flex;
               .mint-button{
                   border-radius: 0;
               }
            }
        }
    }

    //选择优惠卷界面
    .select-coupon{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color:rgba(0, 0, 0, 0.5);
        z-index: 100;
        .select-list{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -40%;
            margin-top: -130px;
            width: 80%;
            height: 260px; 
            background-color: #fff;
            overflow: hidden;
            .title{
                height: 20px;
                line-height: 20px;
                font-size: 20px;
                text-align: center;
                padding: 10px;
                color: #49CB5F;
            }
            .list{
                height: 180px;
                overflow: hidden;
                overflow-y: auto;
            }.select-button{
                height: 40px;
            }
        }
    }
}
</style>


